import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Modal, message, Row, Col } from 'antd'
import { brandName } from '../../../configs/config'
import { logout } from '../../../apis/common'

import EditPassword from './modal/editPassword'
import UserInfo from './modal/userInfo'

const { confirm } = Modal

@connect((state) => ({
  config: state.config,
  staffResponse: state.staffResponse,
}))
export default class Header extends Component {
  constructor(props) {
    super(props)
    this.state = {
      userInfo: false, // 控制用户信息弹框显隐
      editPasswordMadalIsOpen: false,
    }
    this.handleLogout = this.handleLogout.bind(this)
  }

  // 登出
  handleLogout() {
    const { config, history } = this.props
    confirm({
      title: '提示',
      content: '确认退出登录吗？',
      onOk() {
        logout({}, (result) => {
          // console.log(result)
          if (result.status === 1) {
            sessionStorage.clear()
            config.staff = {}
            history.push('/login')
          } else {
            message.warning(result.msg)
          }
        })
      },
    })
  }

  cancel = () => {
    this.setState({ editPasswordMadalIsOpen: false })
  }

  handleOk = () => {
    this.setState({ editPasswordMadalIsOpen: false })
  }

  editPasswordOpen = () => {
    this.setState({ editPasswordMadalIsOpen: true })
  }

  getUserInfo() {
    this.setState({ userInfo: true })
  }

  onCancel() {
    this.setState({ userInfo: false })
  }

  logoClick = () => undefined

  render() {
    const { gMenuList, topMenuReskey, topMenuClick } = this.props
    const { editPasswordMadalIsOpen } = this.state
    const topKey = topMenuReskey
    const userinfo = JSON.parse(sessionStorage.getItem('userinfo')) || {}
    const roles = []
    userinfo && userinfo.roles && userinfo.roles.map((item) => {
      roles.push(item.roleName)
    })
    let name = ''
    if (sessionStorage.getItem('userinfo')) {
      name = JSON.parse(sessionStorage.getItem('userinfo')).chineseName
    }
    return (
      <header id="navbar">
        <div id="navbar-container" className="boxed">
          <Row className="row">
            <Col span={20}>
              <div className="navbar-brand" title={brandName} onClick={this.logoClick}>
                <span className="brand-title">
                  <span className="brand-text">
                    <span className="logo" />
                    {brandName}
                  </span>
                </span>
              </div>
              <nav className="topMenus hide">
                {
                  gMenuList && gMenuList.map((item, index) => (
                    <span
                      className={item.resKey === topKey ? 'topMenu on' : 'topMenu'}
                      key={index}
                      onClick={() => topMenuClick(item, index)}
                    >
                      {item.resName}
                    </span>
                  ))
                }
              </nav>
            </Col>
            <Col span={4} className="col">
              <div className="right">
                <ul>
                  <li>
                    <a onClick={() => this.getUserInfo()}>{name}</a>
                  </li>
                  <li>
                    <a onClick={this.handleLogout}>退出</a>
                  </li>
                </ul>
              </div>
            </Col>
          </Row>
        </div>
        {
          editPasswordMadalIsOpen ? (
            <EditPassword
              handleOk={this.handleOk}
              visible={editPasswordMadalIsOpen}
              onCancel={this.cancel}
            />
          )
            : null
        }

        {
          // eslint-disable-next-line react/destructuring-assignment
          this.state.userInfo ? (
            <UserInfo
              onCancel={() => this.onCancel()}
              handleLogout={this.handleLogout}
            />
          ) : null
        }
      </header>
    )
  }
}
